<template>
    <childLayout activeType="vip" :asidebarList="navList" @changeActive="changeActive">
        <div class="child-content">
            <component :is="activeComponent" />
        </div>
    </childLayout>
</template>

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import childLayout from "@/layout/childLayout";
import upgradeVip from './upgradeVip.vue'
import vipBenefit from './vipBenefit.vue'
import scoreRecord from './scoreRecord.vue'
import scoreConfirmList from './scoreConfirmList.vue'
import thesisDownList from './thesisDownList.vue'
import thesisBuyOutList from './thesisBuyOutList.vue'
import collectThesisList from './collectThesisList.vue'
import mineInfo from './mineInfo.vue'
import useUserStore from '@/store/modules/user'
import { computed } from 'vue';
const userStore = useUserStore();

const activeComponent = shallowRef(upgradeVip)
const components = {
    upgradeVip,
    vipBenefit,
    scoreRecord,
    scoreConfirmList,
    thesisDownList,
    thesisBuyOutList,
    collectThesisList,
    mineInfo,
}

const navList = computed(() => {
    let list = [
        // {
        //     name: '会员中心',
        //     path: 'vipCenter',
        // },
        {
            name: '升级VIP',
            type: 'upgradeVip',
        },
        {
            name: '会员权益',
            type: 'vipBenefit',
        },
        {
            name: '积分记录',
            type: 'scoreRecord',
        },
        {
            name: '资产确认列表',
            type: 'scoreConfirmList',
        },
        {
            name: '论文下载列表',
            type: 'thesisDownList',
        },
        {
            name: '论文买断列表',
            type: 'thesisBuyOutList',
        },
        {
            name: '收藏论文列表',
            type: 'collectThesisList',
        },
        {
            name: '我的资料',
            type: 'mineInfo',
        },
    ]

    if (userStore.customerUid) {
        list.push({
            name: '退出登录',
            type: 'logOut',
        })
    }

    return list
})


const changeActive = (item) => {
    if (item.type != 'logOut') {
        if(!userStore.customerUid) {
            ElMessage.error('请登录后再访问！')
            return 
        }

        activeComponent.value = components[item.type]
    } else {
        ElMessageBox.confirm('确认退出登录吗？', '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        }).then(() => {
            userStore.logOut().then(() => {
                location.href = '/login'
            });
        })
    }
}
</script>

<style lang="scss" scoped></style>